---
title: Ставка менија
image: /слике/кориснички-водич/канбан-прегледи/канбан.png
---

<Frame>
  <img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
</Frame>

Дизајнирана ставка менија која се користи у менију или листи за навигацију.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItem } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  const handleButtonClick = (event) => {
    console.log("Icon button clicked!", event);
  };

  return (
    <MenuItem
      LeftIcon={IconBell}
      accent="default"
      text="Menu item text"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={true}
      testId="menu-item-1"
      onClick={handleMenuItemClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Својства      | Тип               | Опис                                                                                                                            |
| ------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| ЛеваИкона     | КомпонентаИконе   | Опциона лева икона приказана пре текста у ставци менија                                                                         |
| нагласак      | низ               | Означава боју нагласка ставке менија. Могућности укључују: `default`, `danger`, и `placeholder` |
| текст         | низ               | Садржај текста ставке менија                                                                                                    |
| иконаДугмад   | низ               | Низ објеката који представљају додатне иконе дугмади повезане са ставком менија                                                 |
| isTooltipOpen | булевска вредност | Управља видљивошћу савета повезаног са ставком менија                                                                           |
| тестИД        | низ               | Атрибут data-testid за сврхе тестирања                                                                                          |
| приКлику      | функција          | Функција се активира када се кликне ставка менија                                                                               |
| className     | низ               | Опционо име за додатно обликовање                                                                                               |

</Tab>
</Tabs>

## Варијанте

Различите варијанте компоненте ставке менија укључују следеће:

### Команда

Ставка менија у стилу команде унутар менија за означавање пречица на тастатури.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemCommand } from "twenty-ui/display";

export const MyComponent = () => {
  const handleCommandClick = () => {
    console.log("Command clicked!");
  };

  return (
    <MenuItemCommand
      LeftIcon={IconBell}
      text="First Option"
      firstHotKey="⌘"
      secondHotKey="1"
      isSelected={true}
      onClick={handleCommandClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Својства     | Тип               | Опис                                                    |
| ------------ | ----------------- | ------------------------------------------------------- |
| ЛеваИкона    | КомпонентаИконе   | Опциона лева икона приказана пре текста у ставци менија |
| текст        | низ               | Садржај текста ставке менија                            |
| firstHotKey  | низ               | Прва тастерска пречица повезана са командом             |
| secondHotKey | низ               | Друга тастерска пречица повезана са командом            |
| isSelected   | булевска вредност | Означава да ли је ставка менија изабрана или истакнута  |
| приКлику     | функција          | Функција се активира када се кликне ставка менија       |
| className    | низ               | Опционо име за додатно обликовање                       |

</Tab>
</Tabs>

### Draggable

A draggable menu item component designed to be used in a menu or list where items can be dragged, and additional actions can be performed through icon buttons.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItemDraggable } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  return (
    <MenuItemDraggable
      LeftIcon={IconBell}
      accent="default"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={false}
      onClick={handleMenuItemClick}
      text="Menu item draggable"
      isDragDisabled={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Својства       | Тип               | Опис                                                                                                      |
| -------------- | ----------------- | --------------------------------------------------------------------------------------------------------- |
| ЛеваИкона      | КомпонентаИконе   | Опциона лева икона приказана пре текста у ставци менија                                                   |
| нагласак       | низ               | Означава боју нагласка ставке менија. Bојa може бити `default`, `placeholder`, и `danger` |
| иконаДугмад    | низ               | Низ објеката који представљају додатне иконе дугмади повезане са ставком менија                           |
| isTooltipOpen  | булевска вредност | Управља видљивошћу савета повезаног са ставком менија                                                     |
| приКлику       | функција          | Функција повратног позива која се активира када се кликне на линк                                         |
| текст          | низ               | Садржај текста ставке менија                                                                              |
| isDragDisabled | булевска вредност | Означава да ли је премештање онемогућено                                                                  |
| className      | низ               | Опционо име за додатно обликовање                                                                         |

</Tab>
</Tabs>

### Multi Select

Provides a way to implement multi-select functionality with an associated checkbox.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemMultiSelect } from "twenty-ui/display";

export const MyComponent = () => {

  return (
    <MenuItemMultiSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Својства       | Тип               | Опис                                                                      |
| -------------- | ----------------- | ------------------------------------------------------------------------- |
| ЛеваИкона      | КомпонентаИконе   | Опциона лева икона приказана пре текста у ставци менија                   |
| текст          | низ               | Садржај текста ставке менија                                              |
| изабрано       | булевска вредност | Указује да ли је ставка менија изабрана (проверено)    |
| onSelectChange | функција          | Функција за повратни позив која се активира када се промени статус чекања |
| className      | низ               | Опционо име за додатно обликовање                                         |

</Tab>
</Tabs>

### Multi Select Avatar

A multi-select menu item with an avatar, a checkbox for selection, and textual content.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemMultiSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  return (
    <MenuItemMultiSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Својства       | Тип               | Опис                                                                      |
| -------------- | ----------------- | ------------------------------------------------------------------------- |
| avatar         | `ReactNode`       | Аватар или икона које се приказују са леве стране ставке менија           |
| текст          | низ               | Садржај текста ставке менија                                              |
| изабрано       | булевска вредност | Указује да ли је ставка менија изабрана (проверено)    |
| onSelectChange | функција          | Функција за повратни позив која се активира када се промени статус чекања |
| className      | низ               | Опционо име за додатно обликовање                                         |

</Tab>
</Tabs>

### Navigate

A menu item featuring an optional left icon, textual content, and a right-chevron icon.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemNavigate } from "twenty-ui/display";

export const MyComponent = () => {
  const handleNavigation = () => {
    console.log("Navigate to another page");
  };

  return (
    <MenuItemNavigate
      LeftIcon={IconBell}
      text="First Option"
      onClick={handleNavigation}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Својства  | Тип             | Опис                                                    |
| --------- | --------------- | ------------------------------------------------------- |
| ЛеваИкона | КомпонентаИконе | Опциона лева икона приказана пре текста у ставци менија |
| текст     | низ             | Садржај текста ставке менија                            |
| приКлику  | функција        | Функција се активира када се кликне ставка менија       |
| className | низ             | Опционо име за додатно обликовање                       |

</Tab>
</Tabs>

### Изаберите

A selectable menu item, featuring optional left content (icon and text) and an indicator (check icon) for the selected state.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemSelect } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Својства    | Тип               | Опис                                                                   |
| ----------- | ----------------- | ---------------------------------------------------------------------- |
| ЛеваИкона   | КомпонентаИконе   | Опциона лева икона приказана пре текста у ставци менија                |
| текст       | низ               | Садржај текста ставке менија                                           |
| изабрано    | булевска вредност | Указује да ли је ставка менија изабрана (проверено) |
| онемогућено | булевска вредност | Указује да ли је ставка менија онемогућена                             |
| закачено    | булевска вредност | Указује да ли је тренутно указано на ставку менија                     |
| приКлику    | функција          | Функција се активира када се кликне ставка менија                      |
| className   | низ               | Опционо име за додатно обликовање                                      |

</Tab>
</Tabs>

### Изаберите Аватар

Изборна ставка менија са аватаром, са опционалним левим садржајем (аватаром и текстом) и индикатором (иконом провере) за изабрано стање.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      testId="menu-item-test"
      onClick={handleSelection}
      className
    />
  );
};

```

</Tab>
<Tab title="Props">

| Својства    | Тип               | Опис                                                                   |
| ----------- | ----------------- | ---------------------------------------------------------------------- |
| avatar      | `ReactNode`       | Аватар или икона које се приказују са леве стране ставке менија        |
| текст       | низ               | Садржај текста ставке менија                                           |
| изабрано    | булевска вредност | Указује да ли је ставка менија изабрана (проверено) |
| онемогућено | булевска вредност | Указује да ли је ставка менија онемогућена                             |
| закачено    | булевска вредност | Указује да ли је тренутно указано на ставку менија                     |
| тестИД      | низ               | Атрибут data-testid за сврхе тестирања                                 |
| приКлику    | функција          | Функција се активира када се кликне ставка менија                      |
| className   | низ               | Опционо име за додатно обликовање                                      |

</Tab>
</Tabs>

### Изаберите боју

Изаберите ставку менија са узорком боје за сценарије где желите да корисници изаберу боју из менија.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectColor } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectColor
      color="green"
      selected={true}
      disabled={false}
      hovered={true}
      variant="default"
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Својства    | Тип               | Опис                                                                                                                                                                                                     |
| ----------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| боја        | низ               | Боја теме која ће бити приказана као узорак у ставки менија. Опције укључују: `green`, `turquoise`, `sky`, `blue`, `purple`, `pink`, `red`, `orange`, `yellow`, и `gray` |
| изабрано    | булевска вредност | Указује да ли је ставка менија изабрана (проверено)                                                                                                                                   |
| онемогућено | булевска вредност | Указује да ли је ставка менија онемогућена                                                                                                                                                               |
| закачено    | булевска вредност | Указује да ли је тренутно указано на ставку менија                                                                                                                                                       |
| variant     | низ               | Варијанта узорка боје. Може бити `default` или `pipeline`                                                                                                                                |
| приКлику    | функција          | Функција се активира када се кликне ставка менија                                                                                                                                                        |
| className   | низ               | Опционо име за додатно обликовање                                                                                                                                                                        |

</Tab>
</Tabs>

### Toggle

Ставка менија са придруженим прекидачем који омогућава корисницима да омогуће или онемогуће одређену функцију

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from '@tabler/icons-react';

import { MenuItemToggle } from 'twenty-ui/display';

export const MyComponent = () => {

  return (
    <MenuItemToggle
      LeftIcon={IconBell}
      text="First Option"
      toggled={true}
      toggleSize="small"
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Својства       | Тип               | Опис                                                          |
| -------------- | ----------------- | ------------------------------------------------------------- |
| ЛеваИкона      | КомпонентаИконе   | Опциона лева икона приказана пре текста у ставци менија       |
| текст          | низ               | Садржај текста ставке менија                                  |
| toggled        | булевска вредност | Указује да ли је прекидач на "укључено" или "искључено" стање |
| onToggleChange | функција          | Функција се активира када се промени стање прекидача          |
| toggleSize     | низ               | Величина прекидача. Може бити или \          |
| className      | низ               | Опционо име за додатно обликовање                             |

</Tab>
</Tabs>
